$(function(){
	//页面加载完成之后执行
	pageInit();
});
function pageInit(){
	//创建jqGrid组件
	jQuery("#list2").jqGrid(
			{
				url : 'data/JSONData.json',//组件创建完成之后请求数据的url
				datatype : "json",//请求数据返回的类型。可选json,xml,txt
				colNames : [ 'Inv No', 'Date', 'Client', 'Amount', 'Tax','Total', 'Notes' ],//jqGrid的列显示名字
				colModel : [ //jqGrid每一列的配置信息。包括名字，索引，宽度,对齐方式.....
				             {name : 'id',index : 'id',width : 155, frozen: true,colmenu : true, coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:false, freeze : true},sorttype:'integer', searchoptions:{sopt:['eq','ne','le','lt','gt','ge','bw','bn','cn','nc','ew','en']}}, 
				             {name : 'invdate',index : 'mydate',width : 190,
							 sorttype:'date',
							 formatter: 'date',
							 formatoptions : {
								 srcformat: 'Y-m-d',
								 newformat: 'm.d'
							 },
							 searchoptions: {
								 sopt : ['eq'],
								 // dataInit is the client-side event that fires upon initializing the toolbar search field for a column
								 // use it to place a third party control to customize the toolbar
								 dataInit: function (element) {
									jQuery(element).datepicker({
										 id: 'orderDate_datePicker',
										 dateFormat: 'MM.dd',
										 //minDate: new Date(2010, 0, 1),
										 maxDate: new Date(2020, 0, 1),
										 showOn: 'focus'
									 });
								 }
							 }
							}, 
				             {name : 'name',index : 'name asc, invdate',width : 100, stype:'select', editable: true,  edittype : 'select', editoptions:{value:{'':'全部',1:'Client 3',2:'Client 2'}}}, 
				             {name : 'amount',index : 'amount',width : 80,align : "right"}, 
				             {name : 'tax',index : 'tax',width : 80,align : "right"}, 
				             {name : 'total',index : 'total',width : 80,align : "right"}, 
				             {name : 'note',index : 'note',width : 125,sortable : false} 
				           ],
				rowNum : 10,//一页显示多少条
				rowList : [ 10, 20, 30 ],//可供用户选择一页显示多少条
				loadonce:true,//只加载一次数据，后面排序，搜索使用前端算法
				// gridview: true,
				multiSort: true, // 允许多列排序
				sortable: true,// 列拖动排序
				viewrecords: true,
				colMenu : true,
				pager : '#pager2',//表格页脚的占位符(一般是div)的id
				// sortname : 'id',//初始化的时候排序的字段
				sortorder : "desc",//排序方式,可选desc,asc
				mtype : "get",//向后台请求数据的ajax的类型。可选post,get
				viewrecords : true,
				shrinkToFit: false, // 如果需要冻结列必须使用 must be set with frozen columns, otherwise columns will be shrank to fit the grid width
				width: 580,
                height: 200,
				caption : "JSON Example", //表格的标题名字
				search : {  

					caption: "Search...",  
			   
					Find: "Find",  
			   
					Reset: "Reset",  
			   
					odata : ['equal', 'not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain'],  
			   
					groupOps: [ { op: "AND", text: "all" }, { op: "OR", text: "any" } ],  
			   
					matchText: " match",  
			   
					rulesText: " rules"  
			   
				  }
			   
			});
	/*创建jqGrid的操作按钮容器*/
	/*可以控制界面上增删改查的按钮是否显示*/
	jQuery("#list2").jqGrid('navGrid', '#pager2', {edit : false,add : false,del : false});

	// 增加搜索栏
	jQuery("#list2").jqGrid('filterToolbar',{searchOperators : true});

	
	// 选择显示哪些列
	  jQuery("#list2").jqGrid('navButtonAdd','#pager2',{
		caption: "Columns",
		title: "Reorder Columns",
		onClickButton : function (){
			jQuery("#list2").jqGrid('columnChooser');
		}
	});

	// 导出表格
	jQuery("#export").on("click", function(){
		jQuery("#list2").jqGrid("exportToExcel",{
			includeLabels : true,
			includeGroupHeader : true,
			includeFooter: true,
			fileName : "jqGridExport.xlsx",
			maxlength : 40 // maxlength for visible string data 
		})
	})

	// 冻结列，同时列配置需要增加frozen: true
	jQuery("#list2").jqGrid("setFrozenColumns");
}